<template>
    <div>
        <el-select v-model="value" placeholder="请选择奖金汇总表类型">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-date-picker
            v-model="month"
            type="month"
            placeholder="选择月"
            value-format="yyyy-MM">
        </el-date-picker>
        <el-button type="primary" @click="showTable" style="margin-left:30px;">查询</el-button>
        <el-button type="primary">打印</el-button>
        <el-button type="primary">下载</el-button>
        <div class="page_word" v-show="!isShowTable1 && !isShowTable2">BNS-3-2-4</div>
        <div class="bns_title">
            {{value}}--{{month}}
        </div>
        <el-table
            v-show="isShowTable1"
            :data="tableData1"
            border
            style="width: 100%">
            <el-table-column
            prop="a1"
            label="类型">
            </el-table-column>
            <el-table-column
            prop="a2"
            label="金额">
            </el-table-column>
            <el-table-column
            prop="a3"
            label="最高">
            </el-table-column>
            <el-table-column
            prop="a4"
            label="最低">
            </el-table-column>
            <el-table-column
            prop="a5"
            label="中间值">
            </el-table-column>
            <el-table-column
            prop="a6"
            label="人数">
            </el-table-column>
        </el-table>
        <div class="page_word" v-show="isShowTable1">BNS-3-2-4.1</div>
        <el-table
            v-show="isShowTable2"
            :data="tableData2"
            border
            style="width: 100%">
            <el-table-column
            prop="a1"
            label="编号">
            </el-table-column>
            <el-table-column
            prop="a2"
            label="红宝石奖">
            </el-table-column>
            <el-table-column
            prop="a3"
            label="翡翠奖">
            </el-table-column>
            <el-table-column
            prop="a4"
            label="钻石奖">
            </el-table-column>
            <el-table-column
            prop="a5"
            label="金钻奖">
            </el-table-column>
            <el-table-column
            prop="a6"
            label="金钻平级奖">
            </el-table-column>
            <el-table-column
            prop="a7"
            label="顾客级差">
            </el-table-column>
            <el-table-column
            prop="a8"
            label="直销员奖">
            </el-table-column>
            <el-table-column
            prop="a9"
            label="直销员级差">
            </el-table-column>
            <el-table-column
            prop="a10"
            label="尾线奖">
            </el-table-column>
            <el-table-column
            prop="a11"
            label="管理费">
            </el-table-column>
            <el-table-column
            prop="a12"
            label="总额">
            </el-table-column>
        </el-table>
        <div class="page_word" v-show="isShowTable2">BNS-3-2-4.2</div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            // 选择器
            options: [
                {
                    value: '各级别奖金汇总表',
                    label: '各级别奖金汇总表'
                }, 
                {
                    value: '奖金计算明细表',
                    label: '奖金计算明细表'
                }, 
                
            ],
            value: '请选择奖金汇总表类型',
            month:"请选择月份",
            // 表格
            tableData1:[
                {
                    a1:"xxx",
                    a2:"1020",
                    a3:"124",
                    a4:"21",
                    a5:"30",
                    a6:"50",
                    
                },
                {
                    a1:"xxx",
                    a2:"2341",
                    a3:"321",
                    a4:"35",
                    a5:"50",
                    a6:"30",
                    
                },
                {
                    a1:"xxx",
                    a2:"3512",
                    a3:"214",
                    a4:"21",
                    a5:"121",
                    a6:"100",
                    
                },
                {
                    a1:"xxx",
                    a2:"3658",
                    a3:"145",
                    a4:"11",
                    a5:"20",
                    a6:"321",
                   
                },
            ],
            tableData2:[
                {
                    a1:"00001425",
                    a2:"100",
                    a3:"212",
                    a4:"145",
                    a5:"254",
                    a6:"214",
                    a7:"145",
                    a8:"484",
                    a9:"125",
                    a10:"125",
                    a11:"325",
                    a12:"1021",
                },
                {
                    a1:"00001123",
                    a2:"234",
                    a3:"364",
                    a4:"243",
                    a5:"345",
                    a6:"578",
                    a7:"986",
                    a8:"574",
                    a9:"435",
                    a10:"456",
                    a11:"345",
                    a12:"3501",
                },
                {
                    a1:"00005432",
                    a2:"234",
                    a3:"675",
                    a4:"234",
                    a5:"567",
                    a6:"213",
                    a7:"765",
                    a8:"234",
                    a9:"121",
                    a10:"653",
                    a11:"654",
                    a12:"2544",
                },
            ],
            isShowTable1:false,
            isShowTable2:false,
        }
    },
    methods:{
        showTable(){
            if(this.value == "各级别奖金汇总表"){
                this.isShowTable1 = true;
                this.isShowTable2 = false
            }
            if(this.value == "奖金计算明细表"){
                this.isShowTable1 = false
                this.isShowTable2 = true;
            }
        }
    }
}
</script>
